*{
    margin: 0;
    padding: 0;
}
.body{
    font-family: PingFangSC-Semibold, PingFang SC;
}
/* .index{
    width: 10rem; 
    height: 21.653333rem;
    display: flex;
    flex-direction: column; 
} */


.indextop{
    width: 8rem; 
    height: 2.266667rem;
    display: flex;
    align-items: flex-end;
    flex-direction: row;
}
.indextop .cha{
    width: .506667rem;
    height: .613333rem;
    background-image: url(../img/pro/icon_cancel_h.png);
    background-repeat: no-repeat;
    margin-left: .853333rem;
    margin-bottom: .053333rem;
}
.indextop .topz{
    width: 1.76rem;
    height: .666667rem;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-size: .48rem;
    font-weight: 600;
    color: #3D3C3B;
    line-height: 25px;
    margin-left: 2.506667rem;
    margin-bottom: .106667rem;
}


.indexmid{
    width: 10rem; 
    height: 9.066667rem;
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
}
.indexmid .midin{
    display: flex;
}
.indexmid .midin img{
    border: .026667rem white dashed;
}

.indexbottem{
    display: flex;
    width: 10rem; 
    height: 10.32rem;
    align-items: center;
    flex-direction: column;
}

.indexbottem .bottemtop{
    display: flex;
    flex-direction: column;
}

.indexbottem .bottemtop span{
    display: inline-flex;
    justify-content: center;
    width: 7.133333rem;
    height: .453333rem;
    font-size: .32rem;
    margin-top: .266667rem;
}

.bottemmid1{
    width: 10rem;
    height: 1.386667rem;
    display: flex;
    margin-top: 40px ;
   
}

.bottemmid1 .p1{
    width: 1.413333rem;
    height: 1.386667rem;
    margin-left: .64rem;
    border: .026667rem rgba(0, 0, 0, 0.473) dashed;
}

.bottemmid1 .p2{
    width: 1.253333rem;
    height: 1.253333rem;
    margin-top: .16rem;
    margin-left: .72rem;
    border: .026667rem rgba(0, 0, 0, 0.473) dashed;
} 
.bottemmid1 .p3{
    width: 5.28rem;
    height: 1.333333rem;
    margin-top: .16rem;
    margin-left: .186667rem;
    border: .026667rem rgba(0, 0, 0, 0.473) dashed;
}

.bottemmid2{
width: 10rem; 
display: flex;
}

.bottemmid2 span{ 
    font-size: .32rem;
}


.bottemmid2 .s1{
    margin-left: .853333rem;
    margin-top: .213333rem;  
}

.bottemmid2 .s2{
    margin-left: .88rem;
    margin-top: .266667rem;
}
.bottemmid2 .s3{
    margin-left: .56rem;
    margin-top: .24rem;
    color: #3D3C3B;
    opacity: .4;
}
.bottemmid2 .s4{
    margin-left: .373333rem;
    margin-top: .266667rem;
    color: #3D3C3B;
    opacity: .4;
}
.bottemmid2 .s5{
    margin-left: .266667rem;
    margin-top: .266667rem;
    color: #3D3C3B;
    opacity: .4;
}
.bottemmid2 .s6{
    margin-left: .506667rem;
    margin-top: .266667rem;
    color: #3D3C3B;
    opacity: .4;
}



.bottemfoot{
    width: 300px;
   margin: 60px 10px 76px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   
}

/* .bottemfoot .icon1{
    width: .586667rem;
    height: .933333rem;
    margin-left: .88rem;
    
}
.bottemfoot .icon2{
    width: 2.666667rem;
    height: 2.666667rem;
    margin-left: 2.213333rem;
    margin-bottom: 60px;
    
}
.bottemfoot .icon3{
    margin-left: 2.293333rem;
    
} */